import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router';

class SidebarGroup extends React.Component {
  constructor(props) {
    super(props);
    this.onClickOutside = this.onClickOutside.bind(this);
  }

  onClickOutside(event) {
    event.preventDefault();
    event.stopPropagation();
  }

  renderItemList(items) {
    return items.map(item => (
      <Link activeClassName="active" to={item.itemLink} className="item" key={item.itemId}>
        <span>{item.itemName}</span>
        {
          item.itemRightSideNote !== undefined && <span className="count">{item.itemRightSideNote}</span>
        }
      </Link>
    ));
  }

  render() {
    return (
      <div className="side-group" onClick={this.onClickOutside}>
        <div className="title">{this.props.groupName}</div>
        <div>
          {
            this.props.items && this.renderItemList(this.props.items)
          }
        </div>
      </div>
    );
  }
}

SidebarGroup.propTypes = {
  groupName: PropTypes.string,
  items: PropTypes.arrayOf(PropTypes.shape({
    itemId: PropTypes.any,
    itemName: PropTypes.string,
    itemLink: PropTypes.string,
    itemRightSideNote: PropTypes.any,
  })),
};

export default SidebarGroup;
